<template>
	<view>

		<u-modal :show="show" :title="title" :content='content' @confirm="confirm"></u-modal>
		<!-- <view class="form-test"> -->
		<view class='formstyle  '>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="editFormFields" :rules="rules" ref="form">
				<view class="bg_white">
					<vol-alert>
						<view>授课日期</view>
					</vol-alert>

					<u-row justify="space-between ">
						<!-- <u-col span="1">
							<view class="demo-layout bg-purple-light"></view>
						</u-col> -->
						<u-col span="1">
							<view class="demo-layout bg-purple-light"></view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light"></view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周一</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周二</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周三</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周四</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周五</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周六</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light">周天</view>
						</u-col>
						<u-col span="1">
							<view class="demo-layout bg-purple-light"></view>
						</u-col>
						<!-- <u-col span="1">
							<view class="demo-layout bg-purple-light"></view>
						</u-col> -->
					</u-row>
					<u-form-item label="上午" prop="remark8" borderBottom labelWidth="80" ref="item3">
						<u-checkbox-group v-model="editFormFields.remark8" shape="square" placement="row">
							<!-- {{checkboxList1}} -->
							<u-checkbox :customStyle="{marginRight: '30rpx'}" v-for="(item, index) in checkboxList1"
								v-model="checked" :key="index" :label="item.position" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item label="下午" prop="remark9" borderBottom labelWidth="80" ref="item3">
						<u-checkbox-group v-model="editFormFields.remark9" shape="square" placement="row">
							<!-- {{checkboxList1}} -->
							<u-checkbox :customStyle="{marginRight: '30rpx'}" v-for="(item, index) in checkboxList2"
								v-model="checked" :key="index" :label="item.position" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item label="晚上" prop="remark10" borderBottom labelWidth="80" ref="item3">
						<u-checkbox-group v-model="editFormFields.remark10" shape="square" placement="row">
							<!-- {{checkboxList1}} -->
							<u-checkbox :customStyle="{marginRight: '30rpx'}" v-for="(item, index) in checkboxList3"
								v-model="checked" :key="index" :label="item.position" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<vol-alert>
					<view>个人描述</view>
				</vol-alert>

				<u-form-item label=" " labelPosition="top" prop="teacherDescribe"  >
					<view class="padding_10">
						<u--textarea count v-model="editFormFields.teacherDescribe" placeholder="请输入自我描述">
						</u--textarea>
					</view>

				</u-form-item>
				<vol-alert>
					<view>家教经验</view>
				</vol-alert>
				<u-form-item label=" " labelPosition="top" prop="teacherExperience"  ref="item1"
					 >
					<view class="padding_10">
					<u--textarea count v-model="editFormFields.teacherExperience" placeholder="请输入家教经验">
					</u--textarea>
					</view>
				</u-form-item>
				<vol-alert>
					<view>所获证书</view>
				</vol-alert>
				<u-form-item label=" " labelPosition="top" prop="teacherCertificate"   ref="item1"
					 >
					<view class="padding_10">
					<u--textarea count v-model="editFormFields.teacherCertificate" placeholder="请输入所获证书">
					</u--textarea>
						</view>
				</u-form-item>
			</u--form>

			<!-- </view> -->


			<!-- <vol-form @input-confirm="inputConfirm" @extraClick="extraClick" @onChange="onChange" :load-key="true"
				ref="form" :form-options.sync="editFormOptions" :formFields.sync="editFormFields">
			</vol-form> -->

			<vol-alert>
				<view>身份证正面(横向拍摄)</view>
			</vol-alert>
			<view class="center_img">
				<u-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="1" multiple
					:maxCount="1" width="250" height="150">
					<view v-if="editFormFields.idcardFrontPhoto">
						<image :src="reversed_imageurl(editFormFields.idcardFrontPhoto)" mode="widthFix"
							style="width: 250px;height: 150px;"></image>
					</view>
					<view v-else>
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
							style="width: 250px;height: 150px;"></image>
					</view>

				</u-upload>

			</view>

			<vol-alert>
				<view>身份证反面(横向拍摄)</view>
			</vol-alert>
			<view class="center_img">
				<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2" multiple
					:maxCount="1" width="250" height="150">
					<view v-if="editFormFields.idcardBackPhoto">
						<image :src="reversed_imageurl(editFormFields.idcardBackPhoto)" mode="widthFix"
							style="width: 250px;height: 150px;"></image>
					</view>
					<view v-else>
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
							style="width: 250px;height: 150px;"></image>
					</view>
				</u-upload>

			</view>
			<vol-alert>
				<view>证书照片(请放一起横向拍摄)</view>
			</vol-alert>
			<view class="center_img">
				<u-upload :fileList="fileList3" @afterRead="afterRead3" @delete="deletePic3" name="3" multiple
					:maxCount="1" width="250" height="150">
					<view v-if="editFormFields.certificatePhoto">
						<image :src="reversed_imageurl(editFormFields.certificatePhoto)" mode="widthFix"
							style="width: 250px;height: 150px;"></image>
					</view>
					<view v-else>
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
							style="width: 250px;height: 150px;"></image>
					</view>
				</u-upload>

			</view>


			<view class="btns">

				<view class="btn">
					<u-button type="primary" @click="vailForm" shape="circle" text="递交信息"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {


				show: false,
				title: '提示',
				content: '您的信息已递交系统审核，请耐心等候！',
				type: "新增",
				userid: "",
				test: {
					a: 1,
					b: 2
				},
				rules: {
					teacherDescribe: {
						type: 'string',
						required: true,

						message: '请填写自我描述',
						trigger: ['blur']
					},
					teacherExperience: {
						type: 'string',

						required: true,
						message: '请填写家教经验',
						trigger: ['blur', 'change']
					},
					teacherCertificate: {
						type: 'string',

						message: '请填写所获证书',
						trigger: ['change']
					},
				},

				fileList1: [],
				fileList2: [],
				fileList3: [],
				editFormFields: {
					id: "",
					teacherDescribe: "",
					teacherExperience: "",
					teacherCertificate: ""



				},
				checkboxList1: [{
						name: 'Mon_1',
						position: '  ',
						disabled: false
					},
					{
						name: 'Tues_1',
						position: '  ',
						disabled: false
					},
					{
						name: 'Wed_1',
						position: '  ',
						disabled: false
					},
					{
						name: 'Thur_1',
						position: '  ',
						disabled: false
					},
					{
						name: 'Fri_1',
						position: '  ',
						disabled: false
					},
					{
						name: 'Sat_1',
						position: '',
						disabled: false
					},
					{
						name: 'Sun_1',
						position: '',
						disabled: false
					}
				],
				checkboxList2: [{
						name: 'Mon_2',
						position: '',
						disabled: false
					},
					{
						name: 'Tues_2',
						position: '',
						disabled: false
					},
					{
						name: 'Wed_2',
						position: '',
						disabled: false
					},
					{
						name: 'Thur_2',
						position: '',
						disabled: false
					},
					{
						name: 'Fri_2',
						position: '',
						disabled: false
					},
					{
						name: 'Sat_2',
						position: '',
						disabled: false
					},
					{
						name: 'Sun_2',
						position: '',
						disabled: false
					}

				],
				checkboxList3: [{
						name: 'Mon_3',
						position: '',
						disabled: false
					},
					{
						name: 'Tues_3',
						position: '',
						disabled: false
					},
					{
						name: 'Wed_3',
						position: '',
						disabled: false
					},
					{
						name: 'Thur_3',
						position: '',
						disabled: false
					},
					{
						name: 'Fri_3',
						position: '',
						disabled: false
					},
					{
						name: 'Sat_3',
						position: '',
						disabled: false
					},
					{
						name: 'Sun_3',
						position: '',
						disabled: false
					}

				],

			}
		},

		methods: {
			reversed_imageurl(e) {

				var str = this.http.ipAddress.replace(/\/$/, ''); // 将结尾的 "/" 替换为空字符串

				// console.log(str);
				return str + e
			},
			confirm() {
				// uni.navigateBack();
				// uni.navigateBack({
				// 	delta: 1 // 返回的页面数，如果为1则表示返回上一级页面
				// });
				uni.switchTab({
					url: '/pages/home/home',
					// params: {
					//     name: '参数名',
					//     value: '参数值'
					// }
				});

			},
			deletePic1(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			deletePic2(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			deletePic3(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, "2")
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, "3")
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			async afterRead3(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, "4")
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, type) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.http.ipAddress + 'wechat/teacher/updataimgsfile', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'imgsfile',
						formData: {
							id: this.editFormFields.id,
							type: type,

						},
						header: {
							'content-type': 'multipart/form-data'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

			extraClick(item) {
				//点击后给表字段设置值
				this.editFormFields.customInput = ~~(Math.random() * 10000000)
				this.$toast('表单按钮点击:' + item.title)
			},


			onChange(field, value, item, data) { //日期与下拉框选择事件
				if (field == "selectClickValue" || field == "dateClickValue") {
					this.$toast(`选择字段${field}值${value}`)
					return;
				}
				if (field == 'switchValue') {
					//获取单选字段配置
					let op = this.editFormOptions.find(c => {
						return c.field == 'radioVal'
					});
					//选择是时，隐藏【单选】字段
					this.$set(op, 'hidden', value + '' === "1")
					return;
				}
			},
			vailForm() {
				// this.show = true
				if (this.type == "新增") {
					if (this.fileList1.length == 0) {
						this.$toast('请上传身份证正面')
						return;

					}
					if (this.fileList2.length == 0) {
						this.$toast('请上传身份证反面:')
						return;

					}
					if (this.fileList3.length == 0) {
						this.$toast('请上传证书照片:')
						return;

					}
				}
                  
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					if(this.editFormFields.remark8!=null){
						this.editFormFields.remark8 = this.editFormFields.remark8.join(",");
					}
					if(this.editFormFields.remark9!=null){
						this.editFormFields.remark9 = this.editFormFields.remark9.join(",");
					}
					if(this.editFormFields.remark10!=null){
						this.editFormFields.remark10 = this.editFormFields.remark10.join(",");
					}
					
					
						delete this.editFormFields.idcardFrontPhoto;
						delete this.editFormFields.idcardBackPhoto;
						delete this.editFormFields.certificatePhoto;
						console.log(this.editFormFields);
						
						this.editFormFields.auditStatus="未审核"
							
					this.http.post("wechat/teacher/edit", this.editFormFields, "正在递交数据....").then(data => {
						if (data.code == 200) {
							// this.$toast("data.msg")
							this.show = true
							// 调用 uni.navigateBack() 函数关闭当前页面


						} else {
							this.$toast(data.msg)
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败'+errors)
				})
				// if (this.$refs.form.validate()) {


				// 	// this.$toast("表单校验成功")


				// }
			},
			reset() {
				this.$refs.form.reset();
				this.$toast("表单已重置")



			},
			changePhone(data) {
				let reg = /^1[3456789]\d{9}$/
				// 座机号校验
				let reg2 = /^0\d{2,3}-?\d{7,8}$/
				if (reg.test(data) || reg2.test(data)) {
					// console.log("111")
					return true;
				} else {
					// console.log("222")
					return false;
				}
			},

			inputConfirm(field, e) {
				this.$toast(`字段${field}回车事件`)
				console.log(field)
			} 
			 

		},
		onShow() {

		},
		onReady() {
			//设置表单默认值请写在onReady中
			// this.editFormFields.inputText = 'vol框架';

		},
		onLoad(e) {
			// this.$refs.form.setRules(this.rules)
			if (e.id) {
				this.editFormFields.id = e.id
			}

			var that = this;
			let UserInfo = this.$store.getters.getUserInfo();
			if (UserInfo.teacherId != null && UserInfo.teacherId != "") {
				this.type = "更新"
				var id = UserInfo.teacherId;

				console.log("zz" + id);
				this.http.get("wechat/teacher/" + id, null,
					false).then(
					result => {
						if (result.code == 200) {
							that.editFormFields = result.data;
							that.editFormFields.userid = UserInfo.userId;
							that.editFormFields.remark8=  result.data.remark8.split(",");
							that.editFormFields.remark9=  result.data.remark9.split(",");
							that.editFormFields.remark10= result.data.remark10.split(",");
							
							

						}

					})
			} else {
				this.type = "新增"

			}


		}
	}
</script>

<style lang="less" scoped>
	.form-test {
		height: auto;
		margin-top: -20rpx;
		background: #ffffff;
		padding-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.formstyle {
		margin: 10rpx 0 10rpx 0;
		// background: #fafafa;
		// padding: 20rpx;
	}

	.namestyle {
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		font-size: 30rpx;
		// font-weight: 700;
	}

	.btns {
		display: flex;
		padding: 0rpx 20rpx;
		margin-top: 40rpx;

		.btn {
			flex: 1;
			padding: 20rpx;
		}
	}

	.center_img {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bg_white {
		background: white;
	}

	.padding_10 {
		padding-left: 20rpx;
		padding-right: 20rpx;
		// background: black;
	}
</style>
